<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/qian/bootstrap.min.css" type="text/css" charset="utf-8">
    <script src="../../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

    <style>
        #main {
            width: 100%;
            margin: 20px auto;
            position: flex;

        }

        #main tbody {
            background-color: #E4F2FF;
        }

        nav {
            text-align: center;
            margin: 30px 25%;
            margin-left: 30%;
        }

        .pagination li {
            width: 80px;
            height: 30px;
            border: 1px solid red;
            margin: 0 10px;

        }

        tbody tr {
            text-align: center;
        }

        .pagination li:active {
            background-color: #007BFF;

        }
    </style>
</head>

<body>
    <div id="main">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <th>项目名称</th>
                    <th>申请人</th>
                    <th>性别</th>
                    <th>项目代码</th>
                    <th>身份证号</th>
                    <th>联系电话</th>
                </tr>
            </tbody>

        </table>
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li id="pre">
                    <a href="javascript:void(0)" aria-label="Previous" style="text-decoration:none;">
                        <span aria-hidden="true">上一页</span>
                    </a>
                </li>

            </ul>
        </nav>
    </div>

</body>
<!-- <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> -->
<script>
    var table = document.querySelector("table")
    //模拟后台响应的数据
    var json = [
        // {
        //     "name":"何刷币",
        //     "sex":"男",
        //     "id":"5113242003607214321",
        //     "phone":"13433454755",
        //     "ppn":"破碎机500*750",
        //     "contract":"D2020001"
        // },	 
        // {
        //     "name":"饶逗比",
        //     "sex":"男",
        //     "id":"511324200007214321",
        //     "phone":"13433674785",
        //     "ppn":"破碎机500*750",
        //     "contract":"D2020001"
        // },	 
        {
            "name": "王谢彬",
            "sex": "男",
            "id": "511324199607214321",
            "phone": "13433456785",
            "ppn": "破碎机500*750",
            "contract": "D2020001"
        },
        {
            "name": "李岚",
            "sex": "女",
            "id": "511232198707214321",
            "phone": "15789076543",
            "ppn": "破碎机600*900",
            "contract": "D2020002"
        },
        {
            "name": "展鹏",
            "sex": "男",
            "id": "523784199607214321",
            "phone": "15900895657",
            "ppn": "圆锥破FYB-1300",
            "contract": "D2020003"
        },
        {
            "name": "杨涛",
            "sex": "男",
            "id": "510456200008098907",
            "phone": "13417289876",
            "ppn": "主轴1300圆锥",
            "contract": "D2020004"
        },
        {
            "name": "刘牛",
            "sex": "男",
            "id": "51045601210980",
            "phone": "13409874563",
            "ppn": "圆锥式破碎机PYFB-1325",
            "contract": "D2020005"
        },
        {
            "name": "赵四", "sex": "男",
            "id": "510456199908098907",
            "phone": "19190876754",
            "ppn": "电机250KW-61600",
            "contract": "D2020006"
        },
        {
            "name": "钱胖胖",
            "sex": "男",
            "id": "456234198709328976",
            "phone": "15989765643",
            "ppn": "边护板250*750",
            "contract": "D2020007"
        },
        {
            "name": "雷电将军",
            "sex": "女",
            "id": "510456200008098907",
            "phone": "13433456785",
            "ppn": "薄衬套250*400",
            "contract": "D2020008"
        },
        {
            "name": "胡桃",
            "sex": "女",
            "id": "51034203028976",
            "phone": "13302838771",
            "ppn": "电机185-6",
            "contract": "D2020009"
        },
        {
            "name": "优菈",
            "sex": "女",
            "id": "324098767890987",
            "phone": "13433456785",
            "ppn": "电机槽轮250*1000",
            "contract": "D2020010"
        },
        {
            "name": "钟离",
            "sex": "男",
            "id": "525435789678967865",
            "phone": "10291880987",
            "ppn": "电机槽轮250*1200",
            "contract": "D2020011"
        }, {
            "name": "可莉",
            "sex": "女",
            "id": "4356751999878967898",
            "phone": "13345678976",
            "ppn": "电机槽轮160-6",
            "contract": "D2020012"
        },
        {
            "name": "琴",
            "sex": "女",
            "id": "098765666677775643",
            "phone": "19178651234",
            "ppn": "动颚端盖600*900",
            "contract": "D2020013"
        },
        {
            "name": "八重神子",
            "sex": "女",
            "id": "324330200008008907",
            "phone": "17456755633",
            "ppn": "动颚端盖250*750",
            "contract": "D2020014"
        },
        {
            "name": "心海",
            "sex": "女",
            "id": "525668199898078654",
            "phone": "19908760021",
            "ppn": "动颚密封套300*1300",
            "contract": "D2020015"
        },
        {
            "name": "朱地",
            "sex": "男",
            "id": "123456199898078654",
            "phone": "19908886754",
            "ppn": "动颚密封套150*750",
            "contract": "D2020016"
        },
        {
            "name": "马云",
            "sex": "男",
            "id": "123321145665433421",
            "phone": "18787655567",
            "ppn": "动颚密封套300*1300",
            "contract": "D2020017"
        },
        {
            "name": "蒋美女",
            "sex": "女",
            "id": "511324567454321234",
            "phone": "19908760021",
            "ppn": "动颚密封套300*1300",
            "contract": "D2020018"
        },
        {
            "name": "刘咯",
            "sex": "男",
            "id": "511324378967543214",
            "phone": "19908760021",
            "ppn": "活动齿板750*1060",
            "contract": "D2020019"
        },
        {
            "name": "成功吧",
            "sex": "男",
            "id": "525668109878078654",
            "phone": "19908760021",
            "ppn": "机架内端盖400*600A",
            "contract": "D2020020"
        },
        {
            "name": "钟表",
            "sex": "男",
            "id": "525668199898070331",
            "phone": "19808760078",
            "ppn": "机架内端盖500*750",
            "contract": "D2020021"
        },
        {
            "name": "赵云",
            "sex": "男",
            "id": "525668187698078654",
            "phone": "19967760021",
            "ppn": "动颚密封套300*1300",
            "contract": "D2020022"
        },
        {
            "name": "凯",
            "sex": "男",
            "id": "525999199898078654",
            "phone": "18808760021",
            "ppn": "动颚密封套300*1300",
            "contract": "D2020023"
        },
        {
            "name": "成龙",
            "sex": "男",
            "id": "525668196758078654",
            "phone": "19888760021",
            "ppn": "机架内密封套150*750",
            "contract": "D2020024"
        },
        {
            "name": "学习通",
            "sex": "男",
            "id": "525987799898078654",
            "phone": "17708760021",
            "ppn": "动颚密封套300*1300",
            "contract": "D2020025"
        },
        {
            "name": "函数",
            "sex": "男",
            "id": "525668199898070000",
            "phone": "10908760021",
            "ppn": "机架内密封套600*900",
            "contract": "D2020026"
        },
        {
            "name": "小小",
            "sex": "女",
            "id": "525668199899998654",
            "phone": "19000760021",
            "ppn": "动颚密封套300*1300",
            "contract": "D2020027"
        },
        {
            "name": "哈哈",
            "sex": "女",
            "id": "500778199898078654",
            "phone": "19008760021",
            "ppn": "动颚密封套300*1300",
            "contract": "D2020028"
        },
        {
            "name": "陈小",
            "sex": "男",
            "id": "528887199898078654",
            "phone": "19908745021",
            "ppn": "机架内密封套400*600A",
            "contract": "D2020029"
        },
        {
            "name": "杨杨",
            "sex": "男",
            "id": "528887199898378654",
            "phone": "19908008021",
            "ppn": "机架内密封套400*600A",
            "contract": "D2020030"
        },

    ]


    var ul = document.querySelector(".pagination");
    var page_number = 5; //单页浏览的条数
    var Total_pages; //页数
    var liAll; //页码按钮下标为 1到length-2是页数 0和length-1为上一页和下一页
    var pre; //上一页
    var next; //下一页

    function clearTable() {
        table.innerHTML = `
        <tbody>
             <tr>
                <th>项目名称</th>
                <th>申请人</th>
                <th>性别</th>
                <th>项目代码</th>
                <th>身份证号</th>
                <th>联系电话</th>
            </tr>
        </tbody>
        `
    }
    window.onload = function () {

        json.forEach(function (item, i) {
            var tbody = document.querySelector("tbody");
            if (i < page_number) {
                var tr = document.createElement("tr");
                tr.innerHTML = `
	                        <td>${item.ppn}</td>
	                        <td>${item.name}</td>
	                        <td>${item.sex}</td>
							<td>${item.contract}</td>
							<td>${item.id}</td>
							<td>${item.phone}</td>
	                        `
                tbody.appendChild(tr);
            }

        })

        var len = json.length; //总记录条数

        Total_pages = len % page_number == 0 ? len / page_number : len / page_number + 1; //页数

        for (var i = 1; i <= Total_pages; i++) {
            ul.innerHTML += `
	        <li  id="${i}" style ="width:50px;height:30px;border:1px solid black"><a href="javascript:void(0)" style="text-decoration:none;">${i}</a></li>
	        `
        }

        ul.innerHTML += `
	            <li id="next" >
	                <a href="javascript:void(0)" aria-label="Next" style="text-decoration:none; ">
	                    <span aria-hidden="true" >下一页</span>
	                </a>
	            </li>
				
	    `;
        liAll = document.querySelectorAll("li");
        liAll[1].style.background = "red "
        liAll[1].childNodes[0].style.color = "white"//初始第一页页码是红的
        // console.log([liAll])
        var pagethis = 1; //当前是第几页
        for (var i = 1; i < liAll.length - 1; i++) {
            liAll[i].onclick = function () {
                for (var j = 1; j < liAll.length - 1; j++) {
                    liAll[j].childNodes[0].style.color = "blue";
                    liAll[j].style.background = "white"
                }
                pagethis = this.id; //获取当前是第几页
                liAll[pagethis].childNodes[0].style.color = "white";
                liAll[pagethis].style.background = "red"
                // console.log(liAll[i])
                let start; //当页数据的起始下标
                let end; //当页数据的结束下标
                if (pagethis != 1) {
                    start = (pagethis - 1) * page_number;
                    end = start + (page_number - 1);
                    if (end > json.length - 1) { //如果当页数据结束值大于总数据条数下标的值则赋值为总数据条数最大下标值
                        end = json.length - 1;
                    }
                } else {
                    start = 0;
                    end = page_number - 1;
                }
                // console.log("start=" + start)
                // console.log("end=" + end)
                clearTable();
                var tbody = document.querySelector("tbody");
                json.forEach(function (item, i) {

                    if (i >= start && i <= end) {
                        var tr = document.createElement("tr");
                        tr.innerHTML = `
	                      <td>${item.ppn}</td>
	                      <td>${item.name}</td>
	                      <td>${item.sex}</td>
	                      <td>${item.contract}</td>
	                      <td>${item.id}</td>
	                      <td>${item.phone}</td>
	                        `
                        tbody.appendChild(tr);
                    }
                })

            }
        }
        pre = document.querySelector("#pre") //上一页
        next = document.querySelector("#next") //下一页
        pre.onclick = function () {
            // alert(pagethis)
            if (pagethis != 1) { //当前页数不等于1时执行上一页
                pagethis--;
                for (var j = 1; j < liAll.length - 1; j++) {
                    liAll[j].childNodes[0].style.color = "blue"
                    liAll[j].style.background = "white"
                }
                liAll[pagethis].childNodes[0].style.color = "white";
                liAll[pagethis].style.background = "red"
                let start;
                let end;
                if (pagethis != 1) {
                    start = (pagethis - 1) * page_number;
                    end = start + (page_number - 1);
                    if (end > json.length - 1) {
                        end = json.length - 1;
                    }
                } else {
                    start = 0;
                    end = page_number - 1;
                }

                clearTable();
                var tbody = document.querySelector("tbody");
                json.forEach(function (item, i) {
                    if (i >= start && i <= end) {
                        var tr = document.createElement("tr");
                        tr.innerHTML = `
	                        <td>${item.ppn}</td>
	                        <td>${item.name}</td>
	                        <td>${item.sex}</td>
	                        <td>${item.contract}</td>
	                        <td>${item.id}</td>
	                        <td>${item.phone}</td>
	                        `
                        console.log(tr)
                        tbody.appendChild(tr);
                    }
                })
            }
        }
        next.onclick = function () {
            // alert(pagethis)
            if (pagethis < liAll.length - 2) { //当前页数小于最后一页则执行下一页
                pagethis++;
                for (var j = 1; j < liAll.length - 1; j++) {
                    liAll[j].childNodes[0].style.color = "blue"
                    liAll[j].style.background = "white"
                }
                liAll[pagethis].childNodes[0].style.color = "white";
                liAll[pagethis].style.background = "red"
                let start;
                let end;
                if (pagethis != 1) {
                    start = (pagethis - 1) * page_number;
                    end = start + (page_number - 1);
                    if (end > json.length - 1) {
                        end = json.length - 1;
                    }
                } else {
                    start = 0;
                    end = page_number - 1;
                }

                clearTable();
                var tbody = document.querySelector("tbody");
                json.forEach(function (item, i) {
                    if (i >= start && i <= end) {
                        var tr = document.createElement("tr");
                        tr.innerHTML = `
	                        <td>${item.ppn}</td>
	                        <td>${item.name}</td>
	                        <td>${item.sex}</td>
	                        <td>${item.contract}</td>
	                        <td>${item.id}</td>
	                        <td>${item.phone}</td>
	                        `
                        console.log(tr)
                        tbody.appendChild(tr);
                    }
                })
            }
        }

    }

</script>


</html>